<script lang="ts" setup>
import { ref } from "vue";

const isShow = ref(false);

const onClick = () => {
  isShow.value = !isShow.value;
};
</script>

<template>
  <button @click="onClick">开关按钮</button>
  <!-- 
  v-show 控制的标签，还会保留在页面中，只是被隐藏
  通过 style="display: none;" 不可见，不占位 
  -->
  <div class="box" v-show="isShow">
    我是通过 v-show 条件渲染的盒子
  </div>
  <div class="box" v-if="isShow">
    我是通过 v-if 条件渲染的盒子
  </div>
</template>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 10px;
}
</style>
